<script setup lang="ts">
import { Graph, Options } from '@antv/x6'
import { initPlug, initRegister } from '@/views/ai/agent/x6/config'
import { GraphNode, defaultGroup } from '@/views/ai/agent/x6/tools'
import { Dnd } from '@antv/x6-plugin-dnd'
import { config } from '@/views/ai/agent/x6/graph_config'
import {BluePrintApi, BlueprintDo} from "@/views/ai/agent/x6/api/blue-print-api";

const box = ref<InstanceType<typeof HTMLElement>>()
const tools = ref<InstanceType<typeof HTMLElement>>()
const dnd = ref<Dnd>()
const graph = ref<Graph>()
const startDrag = (e: MouseEvent, node: GraphNode) => {
  if (graph.value && dnd.value) {
    const _node = graph.value.createNode(node.props)
    dnd.value.start(_node, e)
  }
}
const info=ref<BlueprintDo>()
const route = useRoute();
const loading=ref(false)
const init=async ()=>{
  const id=route.params.id as string
  loading.value = true
  info.value=await BluePrintApi.info(id)
  graph.value = new Graph({
    container: box.value,
    ...config
  })
  initPlug(graph.value)
  initRegister()
  if (info.value?.cells){
    graph.value.fromJSON(info.value?.cells)
  }
  dnd.value = new Dnd({
    target: graph.value
  })
  loading.value = false
}
const save=async ()=>{
  const json=graph.value?.toJSON()
  if (info.value){
    //console.log(json)
    await BluePrintApi.save({id:info.value.id,...json})
  }
}
onMounted(() => {
  init()
})
</script>

<template>
  <el-header class="x6-header">
    <div class="title">{{info?.name}}</div>
    <div>
      <div class="tools">
        <el-button-group>
          <el-button link type="primary" @click="save">保存</el-button>
        </el-button-group>
      </div>
    </div>
  </el-header>
  <el-container class="x6" v-loading="loading">
    <el-aside class="aside" ref="tools">
      <el-collapse accordion>
        <el-collapse-item
          v-for="group in defaultGroup"
          :name="group.name"
          :key="group.name"
        >
          <template #title>
            <div class="collapse-title">{{group.name}}</div>
          </template>
          <div class="group">
            <template v-for="item in group.child" :key="item.name">
              <div class="tool" @mousedown="(e) => startDrag(e, item)">
                {{ item.title }}
              </div>
            </template>
          </div>
        </el-collapse-item>
      </el-collapse>
    </el-aside>
    <el-main style="padding: 0; overflow: hidden;">
      <div style="width: 100%; height: 100%" ref="box"> </div>
    </el-main>
  </el-container>
</template>

<style scoped lang="scss">
.x6 {
  width: 100%;
  height: calc(
    100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - var(--app-content-padding) - 80px
  );
  overflow: hidden;
}
.aside {
  height: 100%;
  width: 200px;
  background-color: white;
  .group {
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 10px;
    padding: 10px;
    flex-wrap: wrap;
    .tool {
      width: calc(50% - 10px);
      border: 1px solid #000000;
      user-select: none;
      text-align: center;
      padding: 5px 0;
      border-radius: 5px;
    }
  }
}
.x6-header{
  height: 80px;
  background: white;
  .title{
    font-size: 24px;
    font-weight: bold;
  }
  .tools{
    padding: 10px 0;
  }
}
.collapse-title{
  padding: 0 0 0 10px;
}
</style>
